<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>试卷详情</title>
    <link rel="icon" type="image/png" href="../img/icon.png">
    <link rel="stylesheet" href="../css/toastr.min.css">
    <style>
        body {
            background-color: #333;
            margin: 0;
        }
        #app {
            background-color: #ccc;
            margin: 0 auto;

            max-width: 900px;
            min-width: 600px;
        }
        hr {
            margin: 5px 0;
        }

        .stu-info {
            background-color: #eee;
            padding: 10px 20px;
            font-size: 22px;
            display: flex;
            margin-bottom: 10px;
        }
        .stu-info .item {
            padding: 0 20px;
        }

        .question {
            background-color: white;
            padding: 20px 20px;
        }
        .description {
            font-size: 18px;
        }
        .description .q-title {
            color: white;
            background-color: #5d9cec;
            border-radius: 5px;
            padding: 2px 10px;
            font-size: 18px;
        }
        .description .q-txt {
            margin: 5px 0;
            border: 1px solid #ccc;
            padding: 10px;
            line-height: 20px;
            white-space: pre-wrap;
            font-weight: bold;
            letter-spacing: 1px;
        }
        .answer {

        }
        .answer .a-tip {
            padding-bottom: 10px;
            color: #b70404;
        }
        .answer .a-tip .a-title {
            display: inline-block;
            color: white;
            background-color: #5d9cec;
            border-radius: 5px;
            padding: 2px 10px;
            font-size: 18px;
            cursor: pointer;
        }
        .answer .a-tip .stu-answer {
            display: inline-block;
            margin: 0 10px;
        }
        .answer .a-tip .stu-answer:after {
            display: inline-block;
            content: '';
            width: 20px;
            height: 20px;
            background-image: url("../img/checkbox.png");
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: 0 0;
            vertical-align: bottom;
        }
        .answer .a-tip .correct-answer {
            display: inline-block;
        }
        .answer .a-tip .correct-answer:after {
            display: inline-block;
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #beecbe;
            vertical-align: bottom;
        }
        .answer .a-tip .stu-score {
            padding: 5px;
            float: right;
            font-weight: bold;
        }
        .bg-correct {
            background-color: #beecbe;
        }
        .answer .a-list .a-item {
            padding: 5px 10px;
            border-radius: 5px;
            margin-bottom: 5px;
        }

        /*非选择题*/
        .answer .q-txt {
            margin: 5px 0;
            border: 1px solid #ccc;
            padding: 10px;
            line-height: 20px;
            white-space: pre-wrap;
            letter-spacing: 1px;
            font-size: 16px;
        }

        .checkbox-unchecked:before {
            display: inline-block;
            content: '';
            width: 20px;
            height: 20px;
            background-image: url("../img/checkbox.png");
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: 0 -25px;
            vertical-align: bottom;
        }

        .checkbox-checked:before {
            display: inline-block;
            content: '';
            width: 20px;
            height: 20px;
            background-image: url("../img/checkbox.png");
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: 0 0;
            vertical-align: bottom;
        }

    </style>
</head>
<body>
<!-- TODO: 转换成 PDF 时, 答案无法显示 -->
<div id="app" v-cloak>
    <div class="stu-info" >
        <div class="item">
            姓名: {{stuName}}
        </div>
        <div class="item">
            选择题: {{choiceScore}}
        </div>
        <div class="item">
            简答题: {{shortScore}}
        </div>
        <div class="item">
            编程题: {{programmingScore}}
        </div>
        <div class="item">
            总分: {{totalScore}}
        </div>
    </div>

    <div v-for="(q,index) in choiceList">
        <div class="question">
            <div class="description" >
                <div>
                    <span class="q-title">题目描述:</span>
                </div>
                <pre class="q-txt" v-text="q.description" ></pre>
            </div>
            <div class="answer">
                <div class="a-tip">
                    <span class="a-title">题目选项:</span>
                    <span class="stu-answer" >我的答案: </span>
                    <span class="correct-answer" >正确答案: </span>
                    <span class="stu-score">得分: {{q.stuScore}}</span>
                </div>
                <div class="a-list" >
                    <div v-for="(opt,index) in q.optionList" :class=" 'a-item' + ( q.answer.indexOf(opt.key) >= 0 ?' bg-correct':'') " >
                        <span :class=" 'checkbox-' + ( q.stuAnswer.indexOf(opt.key) >= 0 ? 'checked' : 'unchecked' ) " ></span>
                        <span>{{opt.key}}: </span>
                        <span>{{opt.value}}</span>
                    </div>
                </div>
            </div>
        </div>
        <hr>
    </div>

    <div v-for="(q,index) in otherList">
        <div class="question">
            <div class="description" >
                <div>
                    <span class="q-title">题目描述:</span>
                </div>
                <pre class="q-txt" v-text="q.description" ></pre>
            </div>
            <div class="answer">
                <div class="a-tip">
                    <span class="a-title" >我的答案: </span>
                    <span class="a-title" @click=" q.show = !q.show " >参考答案: </span>
                    <span class="stu-score">得分: {{q.stuScore}}</span>
                </div>
                <pre class="q-txt" v-if="q.show" v-text="q.answer" ></pre>
                <pre class="q-txt" v-text="q.stuAnswer" ></pre>
            </div>
        </div>
        <hr v-if=" index < otherList.length - 1" >
        <!-- <div v-else style="height: 10px" ></div> -->
    </div>

</div>

<script src="../js/vue.min.js" ></script>
<script src="../js/jquery-3.3.1.min.js" ></script>
<script src="../js/toastr.min.js" ></script>
<script src="../js/base.js" ></script>
<script>
    //Vue.config.devtools = true; // 描述浏览器调试工具是否可用
    new Vue({
        el: "#app",
        data: {
            stuName: '汤姆猫',
            choiceScore: 0,
            shortScore: 0,
            programmingScore: 0,
            totalScore: 0,
            choiceList: [], // 选择题
            otherList: [] // 简答题、编程题
        },
        beforeMount() {
            let search = location.search;
            if(search.startsWith("?")) {
                search = search.substr(1);// 获取请求参数
            }
            this.search = search;

            this.doLoadExamPaperDetails();
        },
        methods: {
            doLoadExamPaperDetails() {
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/front/paper/previewExam",
                    data: this.search,
                    dataType: 'json',
                    success: ({msg, success, data}) => {
                        toastr[success ? "success":"warning"](msg);
                        if(success) {
                            //console.log('previewExam:', data);
                            this.stuName = data.stu.name;

                            let qtArr = data.questions;
                            qtArr.sort((a,b) => a.id - b.id);
                            let stuAnswers = data.stuExamAnswers;
                            stuAnswers.sort((a,b) => a.id - b.id);
                            for(let index in qtArr) {
                                let qt = qtArr[index];
                                let an = stuAnswers[index];
                                qt.stuAnswer = an.answer;
                                qt.stuScore = an.score/10;// 保存的没有小数分

                                switch (qt.typeId) {
                                    case 1:// 选择题
                                        this.choiceScore += qt.stuScore;
                                        qt.optionList = JSON.parse(qt.optionList);
                                        this.choiceList.push(qt);
                                        break;
                                    case 2:// 简答题
                                        this.shortScore += qt.stuScore;
                                        qt.show = false;
                                        this.otherList.push(qt);
                                        break;
                                    case 3:// 编程题
                                        this.programmingScore += qt.stuScore;
                                        qt.show = false;
                                        this.otherList.push(qt);
                                        break;
                                }
                            }

                            this.totalScore = data.totalScore/10;
                            //this.totalScore = this.choiceScore + this.shortScore + this.programmingScore;
                        }
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            }
        }
    });
</script>
</body>
</html>